<template>
  <div id="content">
    <div id="logo">
      <img id="logo" src="/static/images/index/logo.png">
      <h1>舍宝</h1>
      <span>开启我的宿舍生活</span>
<!--      文档中有关于获取点击授权后的回调信息 -->
      <i-button open-type="getUserInfo" @getuserinfo="getUserData" id="loginbtn" size="large" type="warning" shape="circle">Login</i-button>
    </div>
  </div>
</template>

<script>
  import store from "../../../store";
  export default {
    name: "index",
    data() {
      return {
        userInfo:{}
      }
    },
    components: {
    },
    // beforeMount() {
    //   // 开启小程序时获取一次登录信息
    //   this.handleGetUserInfo()
    // },
    methods: {
      // 获取用户信息方法的封装
      handleGetUserInfo() {
        wx.getUserInfo({
          success: (res) => {
            this.userInfo = res.userInfo
              let avatarUrl = res.userInfo.avatarUrl
              let nickName = res.userInfo.nickName
              console.log(res.userInfo)
              store.commit('setUserInfo', res.userInfo)

          },
          fail: (res) => {
            console.log("信息获取失败");
          }
        })
      },
      getUserData(data) {
        // console.log(data);
        // 判断用户是否授权
        if (data.mp.detail.errMsg == 'getUserInfo:ok') {
          // 授权后重新获取一次用户信息，达到直接授权登录，而不是重新点击login获，或者重启应用
          this.handleGetUserInfo();
            wx.navigateBack({
                delta: 1
            })
        }
      }
    }
  }
</script>

<style>
  page {
    background-color: #FFFAF0;
  }
  #logo {
    display:flex;
    justify-content: center;
  }
  #logo img {
    width: 350rpx;
    height: 350rpx;
    position: absolute;
    top: 18%;
  }
  #logo h1 {
    position: absolute;
    top: 45%;
    color: #707070;
    font-size: 50rpx;
    font-weight: bold;
  }
  #logo span {
    position: absolute;
    top: 60%;
    color: #707070;
    font-weight: bold;
  }
  #loginbtn {
    position: absolute;
    top: 65%;
    width: 300rpx;
  }
</style>
